import React, { memo } from 'react'
import { PaginationWrapper } from './style'
import { Pagination } from 'antd'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { changeCurrentPageAction, fetchRoomListAction } from '@/store/modules/entire/actionCreators'

const EntirePagination = memo(() => {
  const { totalCount, currentPage, roomList } = useSelector((state) => {
    return {
      totalCount: state.entire.totalCount,
      currentPage: state.entire.currentPage,
      roomList: state.entire.roomList,
    }
  }, shallowEqual)

  const startCount = currentPage * 20 + 1
  const endCount = (currentPage + 1) * 20

  const dispatch = useDispatch()
  function handlePageChange(page) {
    // 页面滚动到顶部
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth',
    })

    // 更新最新的页码: 后台接口是从 0 开始的,所以这里 -1
    dispatch(fetchRoomListAction(page - 1))
  }

  return (
    <PaginationWrapper>
      {!!roomList.length && (
        <div className="info">
          <Pagination pageSize={20} total={totalCount} showSizeChanger={false} onChange={handlePageChange} />
          <div className="desc">
            第 {startCount} - {endCount} 个房源，共超过 {totalCount} 个
          </div>
        </div>
      )}
    </PaginationWrapper>
  )
})

export default EntirePagination
